<template>
    <div class="dashboard-editor-container index">
<!--         <panel-group @handleSetLineChartData="handleSetLineChartData" />-->

<!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
<!--      <line-chart :chart-data="lineChartData" />-->
<!--    </el-row>-->

<!--    <el-row :gutter="32">-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <raddar-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <pie-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <bar-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->
         <div v-if="isshow">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content accountData">
                        <img class="titleIcon" src="../assets/image/icon-zhxx.png" alt="" srcset="" />
                        <div class="title">账户信息</div>
                        <div class="cont">
                            <div class="left ml-30">
                                <div class="">
                                    <p class="color-test">HI,{{company}}公司</p>
                                    <img src="../assets/image/yirenzheng.png" alt="" srcset="" />
                                </div>
                                <div class="color-test">
                                    欢迎您登录奢批数字供应链商家后台
                                </div>
                            </div>
                            <div class="right">
                                <div class="color-test">所有店铺</div>
                                 分类
                                 <el-row class="category">
                                    <el-col :span="5">
                                        <div class="num">{{tmname}}</div>
                                        <div class="name color-test">天猫</div>
                                    </el-col>
                                    <el-col :span="5">
                                        <div class="num">{{jdname}}</div>
                                        <div class="name color-test">京东</div>
                                    </el-col>
                                    <el-col :span="5">
                                        <div class="num">{{skname}}</div>
                                        <div class="name color-test">寺库</div>
                                    </el-col>
                                     <el-col :span="5">
                                         <div class="num">{{klname}}</div>
                                         <div class="name color-test">考拉</div>
                                     </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" class="tips">
                    <div class="grid-content accountData">
                        <img class="titleIcon" src="../assets/image/icon--yjts.png" alt="" srcset="" />
                        <div class="title">预警提示</div>
                        <div class="list color-test">
                            当日缺货订单
                            <div class="orange">{{quehuo}}</div>
                            条
                        </div>
                        <div class="list color-test">
                            当日异常订单
                            <div class="orange">0</div>
                            条
                        </div>
                        <div class="list color-test">
                            当日供价调整
                            <div class="orange">0</div>
                            条
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" class="tips">
                    <div class="grid-content accountData axis">
                        <img class="titleIcon" src="../assets/image/icon--gg.png" alt="" srcset="" />
                        <div class="title">公告</div>
                        <div class="tipsCon axis" >
                            <div v-for="item in noticeList">
                             <div class="list color-test current" style="display: flex;" @click="getContent(item)">
                                <p class="province">{{ item.title }}</p>
                                <p class="bule" style="text-align: center;">
                                    {{ item.readStatus == "0" ? "未读" : (item.readStatus == "1" ? "已读" : "") }}
                                </p>
                                <p class="ash">{{item.createdTime}}</p>
                            </div>
                            </div>
         </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="tips">
                <el-col :span="7">
                    <div class="grid-content accountData axis situation">
                        <div class="title">商品情况</div>
                        <img class="titleIcon" src="../assets/image/icon--yjts.png" alt="" srcset="" />
                        <div>
                            <div class="lists color-test">
                                待同步SPU
                                <div class="orange">{{ countUserGoods.noSyncSpu }}</div>
                                个 &nbsp;SKU&nbsp;{{ countUserGoods.noSyncSku }}个 库存{{ countUserGoods.noSyncRepertory }}
                            </div>
                            <div class="lists color-test">
                                已同步SPU
                                <div class="orange">{{ countUserGoods.syncSpu }}</div>
                                个 &nbsp;SKU&nbsp;{{ countUserGoods.syncSku }}个 库存{{ countUserGoods.syncRepertory }}
                            </div>
                            <div class="lists color-test">
                                已锁库SPU
                                <div class="orange">{{ countUserGoods.lockSpu }}</div>
                                个 &nbsp;SKU&nbsp;{{ countUserGoods.lockSku }}个 库存{{ countUserGoods.lockRepertory }}
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5" class="tips">
                    <div class="grid-content accountData">
                        <img class="titleIcon" src="../assets/image/icon-zjzk.png" alt="" srcset="" />

                        <div class="title">资金状况</div>
                        <div class="lists color-test">
                            <p class="province" style="width: 80px">账户余额</p>
                            <p class="bule">￥{{userFund.quota}}</p>
                        </div>
                        <div class="lists color-test">
                            <p class="province" style="width: 80px">授信余额</p>
                            <p class="bule">￥{{userFund.deposit}}</p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content accountData">
                        <img class="titleIcon" src="../assets/image/icon-ddqk.png" alt="" srcset="" />

                        <div class="title">订单情况</div>
                        <div class="orders">
                            <div class="clear">
                                <div>当日</div>
                                <div>当月</div>
                            </div>
                            <div class="conter">
                                <div>
                                    <div>待支付</div>
                                    <div class="bule">{{ orderCase.day[0].count }}</div>
                                    <div class="bule">{{ orderCase.month[0].count }}</div>
                                </div>
                                <div>
                                    <div>已确认</div>
                                    <div class="bule">{{ orderCase.day[1].count }}</div>
                                    <div class="bule">{{ orderCase.month[1].count }}</div>
                                </div>
                                <div>
                                    <div>已发货</div>
                                    <div class="bule">{{ orderCase.day[4].count }}</div>
                                    <div class="bule">{{ orderCase.month[4].count }}</div>
                                </div>
                                <div>
                                    <div>已完成</div>
                                    <div class="bule">{{ orderCase.day[6].count }}</div>
                                    <div class="bule">{{ orderCase.month[6].count }}</div>
                                </div>
                                <div>
                                    <div>已取消</div>
                                    <div class="bule">{{ orderCase.day[9].count }}</div>
                                    <div class="bule">{{ orderCase.month[9].count }}</div>
                                </div>
                                <div>
                                    <div>缺货</div>
                                    <div class="bule">{{ orderCase.day[3].count }}</div>
                                    <div class="bule">{{ orderCase.month[3].count }}</div>
                                </div>
                                <div>
                                    <div>退款待审</div>
                                    <div class="bule">0</div>
                                    <div class="bule">0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content accountData axis" style="height: 457px;">
                        <img class="titleIcon" src="../assets/image/icon-ddqk.png" alt="" srcset="" />
                        <div class="title">
                            商品排行
                            <div class="timeTab">
                                <div @click="goodsClickRank(1)" :class="{ addColor: add == 1 }">
                                    日
                                </div>
                                <div @click="goodsClickRank(2)" :class="{ addColor: add == 2 }">
                                    周
                                </div>
                                <div @click="goodsClickRank(3)" :class="{ addColor: add == 3 }">
                                    月
                                </div>
                            </div>
                        </div>
                        <el-table :data="goodsRank" style="width: 100%" :header-cell-style="{ background: '#fff' }" :row-style="{ height: '50px' }" :header-row-style="{ height: '50px' }" :cell-style="{ padding: '0px' }" class="table">
                            <el-table-column prop="age" label="排名" width="50"></el-table-column>
                            <el-table-column prop="goodsSku" label="商品编码"></el-table-column>
                            <el-table-column prop="goodsSpu" label="货号" width="100"></el-table-column>
                            <el-table-column prop="brandName" label="品牌"></el-table-column>
                            <el-table-column prop="goodsName" :show-overflow-tooltip="true" label="商品名称"></el-table-column>
                            <el-table-column prop="retailPrice" label="下单金额"></el-table-column>
                            <el-table-column prop="goodsNum" label="下单数量"></el-table-column>
                        </el-table>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content accountData" style="height: 457px;">
                        <img class="titleIcon" src="../assets/image/icon-ddqk.png" alt="" srcset="" />
                        <div class="title">
                            店铺排行
                            <div class="timeTab">
                                <div @click="shopsClickRank(1)" :class="{ addColor: add1 == 1 }">
                                    日
                                </div>
                                <div @click="shopsClickRank(2)" :class="{ addColor: add1 == 2 }">
                                    周
                                </div>
                                <div @click="shopsClickRank(3)" :class="{ addColor: add1 == 3 }">
                                    月
                                </div>
                            </div>
                        </div>
                        <el-table :data="shopRank" :header-cell-style="{ background: '#fff' }" :row-style="{ height: '50px' }" :header-row-style="{ height: '50px' }" :cell-style="{ padding: '0px' }" class="table">
                            <el-table-column prop="index" label="排名" width="100"></el-table-column>
                            <el-table-column prop="name" label="店铺名称" width="180"></el-table-column>
                            <el-table-column prop="price" label="下单金额" width="180"></el-table-column>
                            <el-table-column prop="num" label="下单数量" width="180"></el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content accountData">
                        <img class="titleIcon" src="../assets/image/icon-xdsl.png" alt="" srcset="" />
                        <div class="title">
                            下单数量
                            <div class="timeTab">
                                <div @click="ordersNumClick(1)" :class="{ addColor: add2 == 1 }">
                                    日
                                </div>
                                <div @click="ordersNumClick(2)" :class="{ addColor: add2 == 2 }">
                                    周
                                </div>
                                <div @click="ordersNumClick(3)" :class="{ addColor: add2 == 3 }">
                                    月
                                </div>
                            </div>
                        </div>
                        <div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content accountData">
                        <img class="titleIcon" src="../assets/image/icon-xdje.png" alt="" srcset="" />
                        <div class="title">
                            下单金额
                            <div class="timeTab">
                                <div @click="ordersPriceClick(1)" :class="{ addColor: add3 == 1 }">
                                    日
                                </div>
                                <div @click="ordersPriceClick(2)" :class="{ addColor: add3 == 2 }">
                                    周
                                </div>
                                <div @click="ordersPriceClick(3)" :class="{ addColor: add3 == 3 }">
                                    月
                                </div>
                            </div>
                        </div>
                        <div id="myChart2" :style="{ width: '100%', height: '300px' }"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 弹窗 -->
        <steps @on="on" @ons="ons" v-show="hiddden" @showb="showb"></steps>
       <!-- <router-link v-show="!isshow" style="width: 100%;height: 500px;font-size: 26px;border: 1px solid #333333;padding: 5px;border-radius: 10px;" to="/company/userinfo">{{test}}</router-link>-->
        <el-dialog title="公告" :visible.sync="dialogVisible" width="60%">
            <span v-html="noticeContent"></span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { getHomepageDate, getWeekGoodsRank, getWeekShopsRank, ordersNum, ordersPrice } from '@/api/menu'
    import echarts from 'echarts'
    import PanelGroup from './dashboard/PanelGroup'
    import LineChart from './dashboard/LineChart'
    import RaddarChart from './dashboard/RaddarChart'
    import PieChart from './dashboard/PieChart'
    import BarChart from './dashboard/BarChart'
    import steps from './steps/index.vue'

    const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
    }
};

export default {
    name: 'Index',
    components: {
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart,
        steps
    },
    data() {
        return {
            lineChartData: lineChartData.newVisitis,
            isshow: false,
            dialogVisible: false,
            test: '',
            navIndex: '',
            tableData: [
            ],
            company:'',
            tmname:0,
            jdname:0,
            skname:0,
            klname:0,
            quehuo:0,
            add: 1,
            add1: 1,
            add2: 1,
            add3: 1,
            hiddden: false,
            noticeList:[{
                title:undefined,
                createdTime:undefined
            }],
            noticeContent:"",
            goodsRank:[{
                idnex:undefined,
                goodsSku:undefined,
                goodsSpu:undefined,
                brandName:undefined,
                goodsName:undefined,
                retailPrice:undefined,
                goodsNum:undefined,
            }],
            shopRank:[{
                index:undefined,
                name:undefined,
                price:undefined,
                num:undefined,
            }],
            countUserGoods:{
                lockRepertory: undefined,
                lockSku: undefined,
                lockSpu: undefined,
                noSyncRepertory: undefined,
                noSyncSku: undefined,
                noSyncSpu: undefined,
                syncRepertory: undefined,
                syncSku: undefined,
                syncSpu: undefined,
            },
            userFund:{
                deposit:undefined,
                quota:undefined
            },
            orderCase:{
                day: [{name: "0", count: 0}, {name: "1", count: 0}, {name: "2", count: 0}, {name: "3", count: 0},{name: "4", count: 0},{name: "5", count: 0},{name: "6", count: 0},{name: "7", count: 0},{name: "8", count: 0},{name: "9", count: 0}],
                month: [{name: "0", count: 0}, {name: "1", count: 0}, {name: "2", count: 0}, {name: "3", count: 0},{name: "4", count: 0},{name: "5", count: 0},{name: "6", count: 0},{name: "7", count: 0},{name: "8", count: 0},{name: "9", count: 0}],
            }
        };
    },
    // mounted() {
    //     if (this.isshow == true) {
    //         this.getFundCountList();
    //     }
    // },
    activated() {
        if (this.isshow == true) {
            this.getFundCountList(params);
        }
    },
    created() {
        if (this.$store.state.user.toPath == 2 && this.$store.state.user.hasShop == true) {
            this.getUrl('/web/getuserrole').then(response => {
                // 后台管理员
                if (response.data.roleId == 101) {
                    this.isshow = false;
                } else if (response.data.roleId == 100) {
                    //店铺管理员/权限
                    this.isshow = false;
                    this.hiddden = false;
                } else {
                    this.isshow = true;
                    let params = {
                        shopId: this.$store.state.user.shopid
                    };
                    this.getFundCountList(params);
                }
            });
        }


    },
    watch: {
        '$store.state.user.shopid': function(newFlag, oldFlag) {
            // 需要执行的代码
            if (this.isshow == true) {
                let params = {
                    shopId: this.$store.state.user.shopid
                };
                this.getFundCountList(params);
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）

    methods: {
        goodsClickRank(mark) {
            this.add = mark;
            let datas = {
                goodsStatus: mark
            };
            getWeekGoodsRank(datas).then(res => {
                this.goodsRank = res.data;
            });
        },
        shopsClickRank(mark) {
            this.add1 = mark;
            let datas = {
                shopStatus: mark
            };
            getWeekShopsRank(datas).then(res => {
                this.shopRank = res.data;
            });
        },
        ordersNumClick(mark) {
            this.add2 = mark;
            let datas = {
                orderStatus: mark
            };
             ordersNum(datas).then(res => {
                 console.log(res)
                 var data1 = res.data.hour;
                 // data1.unshift(0);
                 this.drawLine(data1,mark);
            });
        },
        ordersPriceClick(mark) {
            this.add3 = mark;
            let datas = {
                priceStatus: mark
            };
            ordersPrice(datas).then(res => {
                console.log(res)
                var data1 = res.data.hour;
                // data1.unshift(0);
                this.drawLine2(data1,mark);
            });
        },
        getContent(row) {
            this.getUrl("/homepage/updateReadStatus/"+row.id).then(res=>{
                if (res.code == 200) {
                    this.noticeList.forEach(item => {
                        if (item.id == row.id) {
                            item.readStatus = 1;
                        }
                    })
                }
            });
            this.noticeContent = row.content;
            this.dialogVisible = true;
        },
        getFundCountList(params) {
            getHomepageDate(params).then((res) => {
                this.company = res.data.getUserinfo;
                res.data.countUserPlat.forEach(plat =>{
                    if (plat.name == '天猫'){
                        this.tmname = plat.count;
                    }
                    if (plat.name == '京东'){
                        this.jdname = plat.count;
                    }
                    if (plat.name == '寺库'){
                        this.skname = plat.count;
                    }
                    if (plat.name == '考拉'){
                        this.klname = plat.count;
                    }
                })
                this.quehuo = res.data.countUserOrder.count;
                this.noticeList = res.data.notice;
                this.goodsRank = res.data.getGoodsRank;
                this.shopRank = res.data.getShopRank;
                this.countUserGoods = res.data.countUserGoods;
                this.userFund = res.data.getUserFund;
                this.orderCase = res.data.orderCase;
                var data1 = res.data.getOrderNum.hour;
                data1.unshift(0);
                this.drawLine(data1,1);
                var data2 = res.data.getPriceRank.hour;
                data2.unshift(0);
                this.drawLine2(data2,1);
                console.log(data1)
                console.log(data2)
            });
        },
        showb() {
            this.hiddden = true;
        },
        on() {
            this.isshow = true;
        },
        ons() {
            this.isshow = false;
        },
        drawLine(data,mark) {
            var  title = [];
            if (mark == 1) {
                  title = [ '4时', '8时', '12时', '16时', '20时', '24时'];
            } else if(mark == 2){
                  title = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
            } else {
                  title = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'];
            }
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'));
            // 绘制图表
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: title
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        // data: [20, 132, 201, 324, 290, 130, 0],
                        data: data,
                        type: 'line',
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#f25d2d'
                                    },
                                    {
                                        offset: 1,
                                        color: '#11ded6'
                                    }
                                ])
                            }
                        }
                    }
                ]
            });
        },
        drawLine2(data,mark) {
            var  title = [];
            if (mark == 1) {
                  title = [ '4时', '8时', '12时', '16时', '20时', '24时'];
            } else if(mark == 2){
                  title = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
            } else {
                  title = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'];
            }
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart2'));
            // 绘制图表
            myChart.setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data:  title,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        // data: [10, 52, 200, 334, 390, 330, 220]
                        data: data
                    }
                ]
            });
        },
        handleSetLineChartData(type) {
            this.lineChartData = lineChartData[type];
        }
    }
};
</script>

<style lang="scss">
.dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
/*
 */

.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    background: #fff;
    min-height: 230px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.dashboard-editor-container {
    padding: 20px 20px;
}
.accountData {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}
.accountData::after {
    content: '.';
    display: block;
    visibility: hidden;
    height: 0;
}
.accountData .title {
    margin: 25px 0 20px 0;
    padding-left: 50px;
    height: 20px;
    font-size: 20px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: rgba(62, 149, 240, 1);
    line-height: 20px;
    display: block;
}

.accountData .cont {
    // overflow: hidden;
    margin-top: 4%;
}
.accountData .cont .left {
    float: left;
    width: 50%;
    padding-left: 5%;
}
.accountData .cont .left p {
    float: left;
    margin-bottom: 0 !important;
}
.accountData .cont .left img {
    float: left;
    margin: 0px 0 10px 10px;
}
.accountData .cont .right {
    float: right;
    width: 45%;
}
.accountData .cont .right {
}

.category {
    margin-top: 24px;
}
.category .num {
    width: 100%;
    height: 30px;
    font-size: 26px;
    font-family: ArialMT;
    color: rgba(39, 119, 218, 1);
    line-height: 31px;
    text-align: center;
    margin-bottom: 10px;
}
.category .name {
    text-align: center;
}
.tips .list {
    height: 18px;
    font-size: 18px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 18px;
    margin-left: 50px;
    margin-top: 33px;
    overflow: hidden;
}
.axis {
}
.axis .list {
    margin-left: 0;
}
.color-test {
    font-size: 16px !important;
}
.color-test p {
    float: left;
    margin: 0;
}
.color-test p:nth-child(1) {
    max-width: 200px;
    width: auto;
}
.color-test p:nth-child(2) {
}
.color-test p:nth-child(3) {
    float: right;
}
.tips .lists {
    font-size: 18px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 26px;
    margin-left: 50px;
    margin-top: 30px;
    overflow: auto;
}
.tips .lists > p:nth-child(1) {
    width: 50%;
}

.clear {
    width: 45px;
    // height: 18px;
    font-size: 18px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 18px;
    text-align: center;
    margin-left: 10px;
}
.index .orders {
    overflow: hidden;
}
.orders {
    display: flex;
    margin-top: 32px;
}
.orders .conter {
    flex: 1;
    display: flex;
    padding-right: 20px;
}
.orders .conter > div {
    flex: 1;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
}
.orders .conter > div > div:nth-child(2),
.orders .conter > div > div:nth-child(3) {
    margin-top: 30px;
}
.clear > div:nth-child(1) {
    margin-top: 49px;
}
.clear > div:nth-child(2) {
    margin-top: 28px;
}
.timeTab {
    width: 214px;
    height: 35px;
    background: rgba(249, 249, 249, 1);
    border-radius: 18px;
    float: right;
    margin: -10px 20px 0 0;
    display: flex;
    line-height: 35px;
    color: #b4b4b4;
}
.timeTab div {
    flex: 1;
    text-align: center;
    cursor: pointer;
}
.tipsCon {
    // min-width: 390px;
    height: 130px;
    overflow: auto;
    // padding-left: 10px;
    padding-left: 4%;
}
.axis > .list:nth-child(1) {
    margin-top: 0 !important;
}
.situation {
}
.situation .lists {
    width: 420px;
}
.cell {
    text-align: center !important;
}
.titleIcon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 26px;
    left: 20px;
}
/*  */
.color-test {
    font-size: 1rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 2rem;
}
.ml-50 {
    margin-left: 50px;
}
.ml-40 {
    margin-left: 40px;
}
/* .ml-30 {
  margin-left: 40px;
} */
.orange {
    color: #d7732d !important;
    display: inline;
}
.bule {
    color: #3e95f0;
    margin: 0;
}
.province {
    white-space: nowrap; /*强制在一行显示*/
    text-overflow: ellipsis; /*设置超出内容显示...*/
    overflow: hidden; /*一定不能少 超出的内容进行隐藏*/
    margin: 0;
}

.ash {
    color: #909090 !important ;
}
.el-table td,
.el-table--medium td {
    /* border-bottom: 0 !important; */
    /* padding: 0 !important; */
}
.el-table .cell {
    color: #333 !important;
}
// 设置表格字体颜色
.dashboard-editor-container .el-table {
    color: #2777da;
    font-size: 18px;
}
.index .axis .bule {
    margin: 0 5%;
}
.current {
    cursor: pointer;
}
.addColor {
    color: #2777da !important;
}
</style>
